<template>
  <div class="videoContainer">
    <video class="fullscreenVideo" id="bgVid" playsinline autoplay muted loop>
      <source src="@/assets/video/xk.mp4" type="video/mp4">
    </video>
  </div>
  <div class="first">
    <el-form
      ref="ruleFormRef"
      :model="loginForm"
      status-icon
      :rules="rules"
      label-width="120px"
      class="login-loginForm"
    >
      <el-form-item label="用户名" prop="username" class="el">
        <el-input
          v-model="loginForm.username"
          type="text"
          autocomplete="off"
          class="ipt"
        />
      </el-form-item>

      <el-form-item
        label="密&nbsp;&nbsp;&nbsp;&nbsp;码"
        prop="password"
        class="el"
      >
        <el-input
          v-model="loginForm.password"
          type="password"
          autocomplete="off"
          class="ipt"
        />
      </el-form-item>
      <el-form-item label="验证码" prop="captcha" class="el">
        <el-input
          maxlength="5"
          v-model="loginForm.captcha"
          class="ipt"
          @keydown.enter="submitForm(ruleFormRef)"
        />
        <i v-loading="captchaloading" v-html="captcha" id="captcha" @click="getCaptcha"></i>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)" class="but">登陆</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>


<style scoped>
#captcha {
  position: absolute;
  border-color: #ffffff !important;
  left: 430px;
  height: 50px;
  width: 150px;
  cursor: pointer;
}

.first .login-loginForm {
  width: 700px;
  /* background-color: blue; */
  padding-right: 60px;
}
.first :deep(.ipt) {
  height: 50px;
}
.el {
  margin-top: 50px;
}
.first :deep(.el-form-item__label) {
  font-size: 20px;
  font-weight: 900;
  color: #ffffff !important;
  color: black;
}
.first :deep(.el-form-item__error) {
  font-size: 16px;
  margin: 0;
}
.but {
  width: 400px;
  height: 50px;
  display: block;
  margin-left: 60px;
  /* background-color: rgb(15, 104, 229); */
  font-size: 20px;
  border-radius: 10px;
}
.first {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 800px;
  height: 800px;
  /* background: rgba(56, 124, 227, 0.65); */
  display: flex;
  justify-content: center;
  align-items: center;
}

.fullscreenVideo {
  width: 100%;
}
</style>


<script  setup>
import { reactive, ref, onMounted } from "vue";
// import type { FormInstance, FormRules } from 'element-plus'
// 引入登录验证方法
import * as api from "@/api/users";

// 引入users的store
import useUser from "@/store/users";
// 引入组合式的路由api
import { useRouter } from "vue-router";
// 引入login加载动画
import { ElLoading} from "element-plus";
// 引入获取当前角色权限的store
import usePermission from "@/store/permission"
// 引入获取所有角色的store
import useRoles from "@/store/role"
// 使用获取所有角色的store
let roleStore = useRoles()
// 使用获取当前角色权限的store
let permissionStore = usePermission()
// 使用store
let userStore = useUser();

// 使用useRouter
let router = useRouter();

const ruleFormRef = ref();
// 验证用户验证码
const validateCaptcha = (rule, value, callback) => {
  if (value) {
    callback();
  } else {
    callback("请输入验证码");
  }
};
// 验证用户账号
const validateUsername = (rule, value, callback) => {
  let reg = /^[a-zA-Z0-9_-]{3,16}$/;
  if (reg.test(value)) {
    callback();
  } else {
    callback("账号最少4位,最多16位");
  }
};
// 验证密码
const validatePassword = (rule, value, callback) => {
  let reg = /^[a-zA-Z0-9_-]{3,16}$/;
  if (reg.test(value)) {
    callback();
  } else {
    callback("密码最少4位,最多16位");
  }
};
// 表单数据
const loginForm = reactive({
  username: "",
  password: "",
  captcha: "",
});
// 表单验证规则
const rules = reactive({
  username: [{ validator: validateUsername, trigger: "blur" }],
  password: [{ validator: validatePassword, trigger: "blur" }],
  captcha: [{ validator: validateCaptcha, trigger: "blur" }],
});
// 表单提交验证
const submitForm = (formEl) => {
  if (!formEl) return;
  formEl.validate(async (valid) => {
    if (valid) {
      // 打开加载的动画
      const loading = ElLoading.service({
        lock: true,
        text: "登录中...",
        background: "rgba(0, 0, 0, 0.7)",
      });
      try {
        // 验证验证码
        let captchaVerify = await validateCaptchaRemote(loginForm.captcha);
        // 验证码通过之后发起登录请求
        if (captchaVerify) {
          // 获取登录后的结构
          let res = await api.loginApi(loginForm.username, loginForm.password);
            
          let { permission, token, userInfo } = res.data;
        
          // 将token存到sessionStorage
          sessionStorage.setItem("tk", token);

          // 将permission和userInfo存到userStore中

          userStore.permission.value = permission;
          userStore.userInfo.value = userInfo;

          // 发起请求获取当前登录角色的权限 调用store中的方法
          permissionStore.getCurrentPermissions(userInfo.roleid)
          // 发起请求获取所有角色的权限 调用store中的方法
          roleStore.getAllRoles()
          // 跳转到首页
          router.push("/welcome");
        }
        // 关闭login加载动画
        loading.close()
      } catch (e) {
        loading.close()
        console.log(e);
      }
    } else {
      return false;
    }
  });
};

// 声明验证码的响应式变量
const captcha = ref("");
// 声明控制验证码加载动画的变量
const captchaloading = ref(false)
// 获取验证码的方法
const getCaptcha = async () => {
    // 打开验证码的加载动画
    captchaloading.value  = true;
  try {
    //发起请求
    const res = await api.getCaptchaApi();
    // 给表单对象添加验证码
    captcha.value = res.data.img;
    // 关闭验证码加载动画
    captchaloading.value = false;
  } catch (e) {
    console.log(e);
     // 关闭验证码加载动画
     captchaloading.value = false;
  }
};
// 验证验证码
const validateCaptchaRemote = async (captcha) => {
  // 将输入的值全部转为小写
  typeof captcha === "string" && captcha.toLowerCase();
  try {
    // 发起请求
    const res = await api.verifyCaptchaApi(captcha);
    
    return res.data.state;
  } catch (e) {
    console.log(e);
    return false;
  }
};

// 组件挂载的钩子
onMounted(() => {
  getCaptcha();
});
</script>
